<template>
  <div class="index">
    <h2>雾锁深情目-Echarts</h2>
    <p v-if="timer">当前时间：{{ timer }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: ""
    };
  },
  mounted() {
    /**
     * 采用计时器获取最新时间
     */
    setInterval(() => {
      this.getTimer();
    }, 1000);
  },
  methods: {
    /**
     * 获取当前时间
     */
    getTimer() {
      let id = new Date();
      let Y = id.getFullYear();
      let M = this.add0(id.getMonth() + 1);
      let D = this.add0(id.getDate());
      let h = this.add0(id.getHours());
      let m = this.add0(id.getMinutes());
      let s = this.add0(id.getSeconds());
      return (this.timer = Y + "-" + M + "-" + D + " " + h + ":" + m + ":" + s);
    },
    /**
     * 补零
     */
    add0(num) {
      return num < 10 ? "0" + num : num;
    }
  }
};
</script>

<style lang="scss" scoped>
.index {
  background: url("@/assets/head.png");
  background-position: center center;
  background-size: 100% 100%;
  position: relative;
  h2 {
    text-align: center;
    line-height: 45px;
  }
  p {
    font-family: electronicFont;
    font-weight: 600;
    font-size: 20px;
    position: absolute;
    top: 8px;
    right: 12px;
    color: #ffeb7b;
  }
}
</style>